<template>
  <div>
    <p>
      <input type="checkbox" v-model="handAll" @change="handleClcik" />
      已完成{{ complete }} / 全部{{ todoAll }}
    </p>
    <button @click="handelClear">清除所有完成任务</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      handAll: false,
      complete: 0,
      todoAll: 0,
    }
  },
  methods: {
    handelClear () {
      if (!confirm('确定清除')) return
      this.$bus.$emit("handleClear");
    },
    handleClcik () {
      this.$bus.$emit("handleAll", this.handAll);
    },
  },
  created () {
    this.$bus.$on("todoAll", (data, compelteLength, allLength) => {
      this.handAll = data;
      this.complete = compelteLength;
      this.todoAll = allLength;
    });
  },
  beforeDestroy () {
    // 在销毁之前要解绑监听事件
    this.$bus.$off('todoAll')
  },
};
</script>
<style lang="scss" scoped>
div {
  display: flex;
  width: 100%;
  height: 30px;
  justify-content: space-between;
  align-items: center;
}
</style>
